<div class="order-wrap ">
  <div class="header-wrap">
    <div class="main-header">
      <div class="head-title">任务详情</div>
      <div class="head-user" (click)="cancel()">
        <div>返回</div>
        <div class="back-icon"><i class="icon-chevron-up-2 rotate"></i></div>
      </div>
    </div>
  </div>
  <div class="content-wrap">
    <div class="content-top">
      <div class="list-item">
        <div class="list-line" [class.status-start-line]="item.isStart&&!item.isFinished"
          [class.status-end-line]="item.isFinished" [class.status-paused-line]="item.isPause"></div>
        <div class="list-top " [class.status-start-list]="item.isStart&&!item.isFinished"
          [class.status-end-list]="item.isFinished" [class.status-paused-list]="item.isPause">
          <div class="order-info">
            <div class="order-info-items">
              <div class="order-info-items-row">
                <div class="order-info-item">
                  <span>工单号：{{item.jobOrderNum}}</span>
                </div>
                <div class="order-info-item">
                  <span>销售单号：{{item.saleOrderNum}}</span>
                </div>
                <div class="order-info-item">
                  <span>工序序号：{{item.processNumber}}</span>
                </div>
                <div class="order-info-item">
                  <span>工序编码：{{item.processNum}}</span>
                </div>

              </div>
              <div class="order-info-items-row">
                <div class="order-info-item">
                  <span>工序：{{item.processName}}</span>
                </div>
                <div class="order-info-item">
                  <span>产品编码：{{item.productNum}}</span>
                </div>
                <div class="order-info-item">
                  <span>产品名称：{{item.productName}}</span>
                </div>
                <div class="order-info-item">
                  <span>产品单位：</span>
                  <span>{{item.uom}}</span>
                </div>
                <!-- <div class="order-info-item">
                  <span>设备：—</span>
                </div> -->
              </div>
              <div class="order-info-items-row">
                <div class="order-info-item">
                  <span>是否首检：{{item.isFirstInspection?'首检':'否'}}</span>
                </div>
                <div class="order-info-item">
                  <span>是否检验：{{item.isInspection?'检验':'不检验'}}</span>
                </div>
                <div class="order-info-item">
                  <span>标准工时：{{item.standardWorkingHours}} {{item.workingHoursUnit}}</span>
                </div>
                <div class="order-info-item">
                  <span>操作工：<span *ngFor="let a of item.users; let isLast=last">{{a.name}}{{isLast ? '' :
                      ','}}</span></span>
                </div>
                <!-- <div class="order-info-item">
                  <span>设备：—</span>
                </div> -->
              </div>
              <div class="order-info-items-row">
                <div class="order-info-item">
                  <span>计划开始时间：{{item.planStartTime | date:'YYYY-MM-dd HH:mm:ss'}}</span>
                </div>
                <div class="order-info-item">
                  <span>计划结束时间：{{item.planFinishTime | date:'YYYY-MM-dd HH:mm:ss'}}</span>
                </div>
                <div class="order-info-item">
                  <span>开工时间：{{item.actualStartTime}}</span>
                </div>
                <div class="order-info-item">
                  <span>报工时间：{{item.actualFinishTime}}</span>
                </div>
              </div>
            </div>
            <div class="order-status" [class.status-start-color]="item.isStart&&!item.isFinished"
              [class.status-end-color]="item.isFinished" [class.status-paused-color]="item.isPause">
              <div class="status-number">
                <span>{{(item.qualifiedAmount/item.productionQuantity)*100 | number:'1.0-2'}}%</span>
              </div>
              <div class="status-label">
                <span *ngIf="!item.isStart&&!item.isPause&&!item.isFinished">未开工</span>
                <span *ngIf="item.isStart&&!item.isFinished&&!item.isPause">已开工</span>
                <span *ngIf="item.isFinished">已完工</span>
                <span *ngIf="item.isPause">暂停</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-mid">
      <div class="mid-numbers">
        <div class="number-item" *ngFor="let item of numberItems">
          <div class="number-item-num" [ngStyle]="{'color': item.color}">{{item.num}}</div>
          <div class="number-item-text">{{item.text}}</div>
        </div>
      </div>
      <div class="mid-operates">
        <div [ngStyle]="{'cursor': item.isPause ? 'not-allowed' : 'auto'}">
          <div class="operate-btn active" [class.isPause]="item.isPause" (click)="Start()">开工</div>
        </div>
        <div class="operate-btn ml15" (click)="pausedBefore()" *ngIf="!item.isPause">暂停</div>
        <div class="operate-btn ml15 active" (click)="restore()" *ngIf="item.isPause">恢复</div>
      </div>
    </div>
    <div class="content-bot" [ngStyle]="{'cursor': item.isPause ? 'not-allowed' : 'auto'}">
      <div class="bot-left" [class.isPause]="item.isPause">
        <div class="bot-head">
          <div>报工信息</div>
          <div class="bot-head-r">
            <div class="head-sop" (click)="reportHistories()">
              报工记录
            </div>
            <div class="head-sop">
              查看SOP
            </div>
          </div>
        </div>
        <div class="bot-context">
          <div class="context-form">
            <div class="form-items">
              <div class="items-title">合格数量</div>
              <div class="items-content">
                <div class="item-content">
                  <div class="flex-c-center">
                    <div class="item-content-input">
                      <input type="number" dTextInput name="reportedAmount" [(ngModel)]="reportedAmount"
                        placeholder="合格数" [disabled]="this.normalInputDisabled"
                        (click)="onInputClick('reportedAmount')" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-items">
              <div class="items-title">
                不合格数
              </div>
              <div class="items-content">
                <div class="item-content">
                  <div class="flex-c-center">
                    <div class="item-content-input">
                      <input dTextInput type="number" placeholder="不良数" name="不良数" [(ngModel)]="unqualifiedAmount"
                        (click)="onInputClick('unqualifiedAmount')"
                        [disabled]="this.normalInputDisabled">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-items">
              <div class="items-title">
                报废数量
                <!-- <span class="title-add">添加</span> -->
              </div>
              <div class="items-content">
                <div class="item-content">
                  <div class="flex-c-center">
                    <!-- <div class="item-content-input">
                      <input dTextInput readonly placeholder="报废原因">
                    </div> -->
                    <div class="item-content-input">
                      <input dTextInput type="number" placeholder="报废数" name="报废数" [(ngModel)]="scrapAmount"
                        (click)="onInputClick('scrapAmount')"
                        [disabled]="this.normalInputDisabled">
                    </div>
                    <!-- <img src="http://116.62.21.132:8615/img/icon_del.png" alt="" class="item-content-icon "> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="context-form" style="margin-top: 10px;">
            <div class="form-items">
              <div class="items-title">检验数量</div>
              <div class="items-content">
                <div class="item-content">
                  <div class="flex-c-center">
                    <div class="item-content-input">
                      <input dTextInput type="number" name="pendingInspectionQuantity"
                        [(ngModel)]="pendingInspectionQuantity" placeholder="检验数量"
                        (click)="onInputClick('pendingInspectionQuantity')"
                        [disabled]="inspectionInputDisabled" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="form-input">
              <div class="title">操作工人</div>
              <div class="input">
                <input dTextInput readonly/>
              </div>
            </div> -->
          </div>
          <div class="form-item">
            <div class="title">是否入库</div>
            <d-radio-group [name]="'item-group'" [values]="radioItems" [(ngModel)]="currentSelectedItem"
              [direction]="'row'" (change)="radioChange($event)">
            </d-radio-group>
          </div>
          <div class="form-item">
            <div class="title">备注</div>
            <textarea dTextArea name="remark" placeholder="请输入备注" [(ngModel)]="this.item.reportNote"></textarea>
          </div>
        </div>
        <div class="bot-footer">
          <div class="footer-btns">
            <div class="title">汇报人：</div>
            <div class="label">{{this.userName}}</div>
            <!-- <div class="footer-btn active">首检</div> -->
          </div>
          <div class="footer-btns">
            <div class="footer-btn" (click)="cancel()">关闭</div>
            <div class="footer-btn active" (click)="end()">报工</div>
          </div>
        </div>
      </div>
      <div class="bot-keyboard" [class.isPause]="item.isPause">
        <div class="keyboard-item" *ngFor="let item of keyboardItems" (click)="onItemClick(item)">
          <div *ngIf="item !== 'del'; else deleteIcon">
            {{item}}
          </div>
          <ng-template #deleteIcon>
            <img src="../../../assets/img/icon/del.png" alt="" class="keyboard-item-icon">
          </ng-template>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-wrap">
    <div class="footer-items">
      <div class="footer-item" *ngFor="let item of footerItems" [class.active]="selectedFooterItem === item"
        (click)="selectFooterItem(item)">{{item}}</div>
    </div>
    <div class="footer-time">{{this.now | date:'yyyy年MM月dd日 HH:mm:ss'}}</div>
  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
